<template>
  <el-container class="home-container">
    <el-header>
      <!-- 图标字体按钮 -->
      <div>
        <div class="ico">
          <i class="iconfont iconzuzhijiagou"></i>
        </div>
        <span class="ziti">办公地点</span>
      </div>
      <div class="btns">
        <div style="line-height:42px">
          <el-button type="primary" size="small">新 建</el-button>
          <el-button type="primary" size="small">导 入</el-button>
          <el-button type="info" size="small">批量删除</el-button>
        </div>
        <div class="ico2">
          <i class="iconfont  iconcaidan"></i>
        </div>
      </div>
    </el-header>
    <!-- 搜索与添加区域 -->
    <div class="sousuo">
      <div class="input">
        <el-input
          placeholder="请输入内容"
          size="mini"
          style="width:25%;"
          clearable
          @clear="getUserList"
        >
          <el-button
            slot="append"
            icon="iconfont  iconsousuo"
            @click="getUserList"
          ></el-button>
        </el-input>
        <el-button type="" size="mini">高级搜索</el-button>
      </div>
    </div>
    <!-- 主要内容 -->
    <div class="beijing">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%;cursor:pointer;"
        class="table"
        :header-cell-style="{ background: '#F7FBFE' }"
        @selection-change="handleSelectionChange"
      >
        <el-table-column class="column" type="selection" width="55">
        </el-table-column>
        <el-table-column class="column" prop="jiancheng" label="办公地点简称">
        </el-table-column>
        <el-table-column
          prop="quancheng"
          label="办公地点全称"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column prop="city" label="城市"> </el-table-column>
        <el-table-column prop="china" label="国家"> </el-table-column>
        <el-table-column prop="xuhao" label="顺序"> </el-table-column>
      </el-table>
    

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-size="queryInfo.pagesize"
        :page-sizes="[10, 20, 50, 100]"
        :current-page="queryInfo.pagenum"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        class="yemian"
      >
      </el-pagination>
    </div>
  </el-container>
</template>>
<script>
export default {
  data() {
    return {
      //获取用户列表的参数对象
      queryInfo: {
        query: '',
        //当前的页数
        pagenum: 1,
        //当前每个页面数量显示
        pagesize: 6
      },
      total: 6,
      tableData: [
        {
          jiancheng: 'default',
          quancheng: 'default',
          city: '北京',
          china: '中国',
          xuhao: '0'
        },
        {
          jiancheng: '上海',
          quancheng: '上海',
          city: '上海',
          china: '中国',
          xuhao: '0'
        },
        {
          jiancheng: '海口',
          quancheng: '海口',
          city: '海口',
          china: '中国',
          xuhao: '1'
        },
        {
          jiancheng: '淮安',
          quancheng: '淮安',
          city: '淮安',
          china: '中国',
          xuhao: '2'
        },
        {
          jiancheng: '常州市',
          quancheng: '常州市',
          city: '常州市',
          china: '中国',
          xuhao: '3'
        },
        {
          jiancheng: '南京',
          quancheng: '南京',
          city: '南京',
          china: '中国',
          xuhao: '4'
        }
      ],
      multipleSelection: []
    }
  },
  created() {
    this.getUserList()
  },
  methods: {
    //获取列表数据
    getUserList() {},
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    //监听 pagesize 改变的事件
    handleSizeChange(newSize) {
      // console.log(newSize)
      this.queryInfo.pagesize = newSize
      this.getUserList()
    },
    //监听 页码值 改变的事件
    handleCurrentChange(newPage) {
      console.log(newPage)
      this.queryInfo.pagenum = newPage
      this.getUserList()
    }
  }
}
</script>
<style lang="less" scoped>
.home-container {
  height: 100%;
}
.el-header {
  height: 52px !important;
  position: relative;
  background-color: #f9f9f9;
  border-bottom: 1px solid #eaeaea;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 20px;
}
.ico {
  display: inline-block;
  vertical-align: middle;
  width: 35px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  border-radius: 50%;
  margin-right: 10px;
  color: #fff;
  background-color: #217346;
  i {
    font-size: 22px;
  }
}
.ziti {
  font-size: 14px;
}
.btns {
  display: flex;
  justify-content: space-between;
}
.iconfont {
  font-size: 22px !important;
}
.ico2 {
  line-height: 42px;
  padding-left: 14px;
}
//搜索
.sousuo {
  display: flex;
  justify-content: flex-end;
  height: 46px;
  background-color: #ffffff;
  border-bottom: 1px solid #eaeaea;
}
.input {
  width: 100%;
  height: 28px;
  display: flex;
  justify-content: flex-end;

  padding-right: 20px;
  padding-top: 7px;
}
// .input .el-input{
// border-radius: 0%!important;
// }
.input .el-button {
  border-radius: 0%;
}
//主要内容
.beijing {
  height: 100%;
  background-color: #ffffff;
}
.table {
  margin-top: 0;
}
.yemian {
  display: flex;
  justify-content: flex-end;
  padding-right: 20px;
}

//页码
// .el-pager li.active {
//     background: 1px #2DB7F5!important;
//     color: #edf0f3;
//     cursor: default;
//     border-radius: 5px;
// }
// .el-pager li {
//     padding: 0 4px;
//     background: #FFF;
//     font-size: 13px;
//     min-width: 28px;
//     height: 28px;
//     line-height: 28px;
//     box-sizing: border-box;
//     text-align: center;
// }
</style>


<style lang="less" scoped>
.el-table td,
.el-table th {
  padding: 7px 0 !important;
}
.el-table__body tr:hover > td {
  background-color: #d2ecfc !important;
}
//页码
.el-pager li.active {
  background: 1px #2db7f5 !important;
  color: #edf0f3 !important;
  cursor: default;
  border-radius: 5px;
}
.el-pager li {
  padding: 0 4px;
  background: #fff;
  color: #ffffff;
  font-size: 13px;
  min-width: 28px;
  height: 28px;
  line-height: 28px;
  box-sizing: border-box;
  text-align: center;
}
</style>